<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评分</title>
    <style type="text/css">
        #list {
            padding: 0;
            margin: 0;
            list-style: none;
            width: 300px;
            height: 28px;
        }

        #list li {
            float: left;
            width: 27px;
            height: 28px;
            cursor: pointer;
            transition: all 0.5;
        }

        .active {
            background: url(star.gif) no-repeat 0 -28px;
        }

        .default {
            background: url(star.gif) no-repeat 0 0;
        }
    </style>
</head>

<body>
    <ul id="list">
        <li class="default"> </li>
        <li class="default"> </li>
        <li class="default"> </li>
        <li class="default"> </li>
        <li class="default"> </li>
    </ul>
    <div id="div"></div>
</body>
<script>
    (function () {

        var aBtns = document.querySelectorAll('#list li');
        var div = document.querySelector('#div');
        var arr = ['差评', '不推荐', '一般', '推荐', '强力推荐'];

        for (var i = 0; i < aBtns.length; i++) {
            aBtns[i].index = i;
            //鼠标滑入哪个就让星星高亮(前面也高亮)
            aBtns[i].onclick = function () {
                //排他
                for (var k = 0; k < aBtns.length; k++) {
                    aBtns[k].className = 'default';
                }
                //星星高亮
                for (var j = 0; j <= this.index; j++) {
                    aBtns[j].className = 'active';
                }
                div.innerHTML = arr[this.index];
            }
        }
    })();
</script>

</html>